<template>
  <div class="home">
    <div class="home-header">leaflet-示例展示信息</div>
    <div class="home-container">
      <div v-for="(item, index) in mapWidgets" class="home-container-box" @click="openRouter(item)">
          <div class="home-container-box-name">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "home",
  labelName: "地图首页"
});
</script>

<script lang="ts" setup>
import type { Component } from 'vue'
import componentsMap from "../init";
import type { RouterConfig } from "@/types/common";
// 路由组件信息
let mapWidgets: Array<RouterConfig> = Object.keys(componentsMap).map(
  (key: string) => {
    let component: Component = componentsMap[key];
    let labelName = component?.labelName;
    let componentIndex = component?.componentIndex ?? 1;
    return {
      path: `/demo/${key}`,
      name: labelName ?? key,
      componentIndex: componentIndex
    };
  }
).sort((a, b) => a.componentIndex - b.componentIndex);


const openRouter = (item: RouterConfig) => {
  let path = item.path;
  if (path) {
    window.open(path);
  }
};
</script>

<style lang="css" scoped>
.home {
  width: 100%;
  position: absolute;
  right: 0px;
  top: 0px;
  padding: 5px;
}

.home-header {
  padding: 10px;
  height: 72px;
  letter-spacing: 2px;
  line-height: 72px;
  font-size: 28px;
  color: #fff;
  background-color: #409eff;
}

.home-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-height: calc(100% - 100px);
  padding: 20px;
}

.home-container-box {
  width: 400px;
  height: 240px;
  padding: 2px;
  border: #409eff solid 5px;
  border-radius: 5px;
  margin: 10px;
  background-image: url(../../assets/images/demo.jpg);
  background-size: 100% 100%;
  background-origin: border-box;
  cursor: pointer;
}

.home-container-box:hover {
  border: #23d40b solid 5px;
}

.home-container-box-name {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 2px;
}
</style>
